<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <a href="#/home">首页</a>
    <a href="#/about">关于</a>
  </div>

  <div class="router-view"></div>
  
  <script>
    // 获取 router-view 的DOM
    const routerViewEL = document.querySelector('.router-view')


    // 监听URL的改变
    window.addEventListener("hashchange",()=>{
      console.log("aaa",location.hash);
      switch (location.hash) {
        case "#/home":
          routerViewEL.innerHTML = "首页";
          break;
        case "#/about":
          routerViewEL.innerHTML = "关于";
          break;
        default:
          routerViewEL.innerHTML = "";
          break;
      }
    })

  </script>

</body>

</html>